<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <h2>聊天室</h2>
   <div id="content"></div><br/>
   <input id="msg" type="text"/>
   <input type="button" value="发送" id="btn"/>
    <script>
        // 初始化WebSocket对象
        const ws = new WebSocket("ws://localhost:8080/connect")
        // 接收服务端得消息
        ws.onmessage = function(event){
            const chat = JSON.parse(event.data);
            const time = new Date(chat.createTime).toLocaleTimeString();
            document.getElementById('content').innerHTML +=
                `<p> ${chat.username} ${time}:<br/> ${chat.content}</p>`;
        }
        document.getElementById('btn').addEventListener('click',function (){
            let message = document.getElementById('msg').value;
            ws.send(message)
        })

    </script>
</body>
</html>